//
//  SwiftUIView_Stacks.swift
//  SwiftUIPractice
//
//  Created by 这期教程很长 (external - Project) on 2024/8/27.
//

import SwiftUI

struct SwiftUIView_Stacks: View {
    var body: some View {
        
        //堆栈有3种,  垂直的, 水平的, Z轴的-- back to fron  从后往前, 从屏幕里面堆到屏幕外面
        
//        VStack {
//            Rectangle().fill(Color.red).frame(width: 100, height: 100)
//            Rectangle().fill(Color.green).frame(width: 100, height: 100)
//            Rectangle().fill(Color.orange).frame(width: 100, height: 100)
//        }
        
        
//        HStack {
//            Rectangle().fill(Color.red).frame(width: 100, height: 100)
//            Rectangle().fill(Color.green).frame(width: 100, height: 100)
//            Rectangle().fill(Color.orange).frame(width: 100, height: 100)
//        }
        
        //这种就是三个框堆叠在一起
//        ZStack {
//            Rectangle().fill(Color.red).frame(width: 160, height: 160)
//            Rectangle().fill(Color.green).frame(width: 130, height: 130)
//            Rectangle().fill(Color.orange).frame(width: 100, height: 100)
//        }
        
        
        //这个堆栈有个间距, 这个间距 nil 的默认值应该是 8
//        VStack(alignment: .center, spacing: 0, content: {
//            Rectangle().fill(Color.red).frame(width: 100, height: 100)
//            Rectangle().fill(Color.green).frame(width: 100, height: 100)
//            Rectangle().fill(Color.orange).frame(width: 100, height: 100)
//        })

        
        //现在来关注一下堆栈的对齐方式   如果是水平的堆栈, 那么对齐方式就变成了 上对齐 下对齐 居中对齐
        // alignment: .leading  alignment: .trailing,
//        VStack(alignment: .trailing, spacing: 0, content: {
//            Rectangle().fill(Color.red).frame(width: 200, height: 200)
//            Rectangle().fill(Color.green).frame(width: 150, height: 150)
//            Rectangle().fill(Color.orange).frame(width: 100, height: 100)
//        })

        //如果是Z堆栈,那么它的对齐方式就比较丰富,和我们平常使用的那种对齐一样  .top topLeading  bottomTrailing
        //它会把里面的元素全部对齐
        // Z 堆栈没有间距
//        ZStack(alignment: .bottomTrailing, content: {
//            Rectangle().fill(Color.red).frame(width: 200, height: 200)
//            Rectangle().fill(Color.green).frame(width: 150, height: 150)
//            Rectangle().fill(Color.orange).frame(width: 100, height: 100)
//        })

        
            
        //大练习 堆栈互相堆叠
//        ZStack(alignment: .top) {
//            
//            Rectangle().fill(Color.yellow).frame(width: 350, height: 500)
//            
//            VStack(alignment: .leading, spacing: 30 ) {
//
//                Rectangle().fill(Color.red).frame(width: 150, height: 150)
//                Rectangle().fill(Color.green).frame(width: 100, height: 100)
//                
//                HStack(alignment: .bottom) { //这里的设置,是让里面的元素进行对齐
//                    Rectangle().fill(Color.orange).frame(width: 50, height: 50)
//                    Rectangle().fill(Color.pink).frame(width: 75, height: 75)
//                    Rectangle().fill(Color.blue).frame(width: 50, height: 50)
//                }.background(Color.white)
//                
//            }.background(Color.black)
//        }

        
        //在来一个练习
//        VStack(alignment: .center, spacing: 30, content: {
//            Text("5").underline().font(.largeTitle).foregroundStyle(.green )
//            Text("你的购物车").foregroundStyle(.red)
//        })

        //再来一个练习  使用不同的方式造出相同的视图
        VStack(alignment: .center, spacing: 50, content: {
            
            ZStack(alignment: .center, content: {
                
                Circle().fill(.black).frame(width: 100, height: 100)
                Text("9").foregroundStyle(.white).font(.largeTitle)
                
            })
            
            Text("9")
                .foregroundStyle(.white)
                .font(.largeTitle)
                .background(Circle().fill(.black).frame(width: 100, height: 100))
        })
        
    }
}

#Preview {
    SwiftUIView_Stacks()
}
